<template>
  <div
    style="position:fixed;width: 250px;right: 20px;top:120px;z-index: 100;"
  >
      <!--目录导航-->
      <div
        v-for="(anchor, index) in titles"
        :key="index"
        :style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
        style="cursor: pointer"
        @click="handleAnchorClick(anchor)"
      >
        <!--目录连接-->
        <a style="cursor: pointer">{{ anchor.title }}</a>
      </div>
  </div>
</template>

<script setup>
  /**
   * 如果感觉默认的目录导航不好看，可以在这里自己定义
   */
  const props = defineProps({
    titles: Object,
    handleAnchorClick: Function,
    preview: Object // 文档容器
  })

</script>